<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>goodlist</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="./stylesheets/commom.css">
    <link rel="stylesheet" href="./stylesheets/active.css">
</head>

<body>
    <!-- 侧边栏 -->
    <div id="box">
        <div class="box_t">
            <span><i></i>在线咨询</span>
        </div>
        <div class="box_b">
            <span><i></i>TOP</span>
        </div>
    </div>
    <!-- 通知部分notice -->
    <div id="notice">
        <div class="swiper-container swiper3">
            <div class="swiper-wrapper">
                <div class="swiper-slide ">即日起至5.20任购满520即享刻字礼遇，随单可选情人节定制卡片</div>
                <div class="swiper-slide">520限定礼盒上市,爱,就冲动这一次.#LOVE AT FIRST CLASH</div>
            </div>
        </div>
    </div>
    <!-- loge头部header -->
    <div id="header">
        <div class="header-top">
            <div class="h_t_left">
                <ul>
                    <li><a class="a1" href="#">专柜查询</a></li>
                    <li class="li2"><strong></strong><a href="#">客服中心</a>

                        <!-- 二级菜单 -->
                        <div id="service" class="service1">
                            <div class="xj xj1"></div>
                            <div class="s_left">
                                <div class="title">我能帮到您什么？</div>
                                <div class="s_left_ul">
                                    <div><a href="#">常见问题</a></div>
                                    <div><a href="#">订单跟踪</a></div>
                                    <div><a href="#">订购信息</a></div>
                                </div>
                                <div class="s_left_ul">
                                    <div><a href="#">选择我们的原因</a></div>
                                    <div><a href="#">送货与退货</a></div>
                                </div>
                            </div>
                            <div class="s_right">
                                <div class="title">联系我们</div>
                                <div class="s_left_ul">
                                    <div><a href="#">400-820-6362(9:00-21:00)</a></div>
                                    <div><a href="#">在线咨询</a></div>
                                    <div><a href="#">我们提供一周七天服务</a></div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="h_t_right">
                <ul>
                    <li class="h_t_journal"><a href="">订阅电子杂志</a>
                        <div class="h_t_j_o"></div>

                        <!-- 二级菜单 -->
                        <div id="service" class="service2">
                            <div class="xj xj2"></div>
                            <div class="s_left">
                                <div class="title">订阅圣罗兰电子杂志</div>
                                <p class="s_t_p1">请输入您的邮箱</p>

                                <div class="s_t_inpt">
                                    <input type="text">
                                    <div class="s_t_p2">订阅</div>
                                </div>
                                <div class="s_t_agt">
                                    <div class="checkbox"></div>
                                    <p>我同意依照本<span>使用条款</span>和<span>隐私政策</span>对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该
                                        <span>使用条款</span> 和
                                        <span>隐私政策</span> 的内容。</p>
                                </div>
                            </div>
                            <div class="s_right s_right_new">
                                <div class="title">官网专享</div>
                                <div><a href="#">立即成为圣罗兰美妆官网会员，尊享VIP独家礼遇。</a></div>
                                <div class="s_left_ul">

                                    <div><span></span> <a href="#">查看历史订单</a></div>
                                    <div><span></span> <a href="#">官网独家礼赠</a></div>
                                    <div><span></span> <a href="#">收藏您喜欢的产品</a></div>
                                    <div><span></span> <a href="#">一手新品资讯</a></div>
                                </div>
                            </div>

                        </div>

                    </li>
                    <li class="login"><a href="./login.html">登录与注册</a>
                        <div class="h_t_j_o"></div>
                        <!-- 二级菜单 -->
                        <div id="service" class="service4">
                            <div class="xj xj4"></div>
                            <div class="s_left">
                                <div class="title">用户登录</div>
                                <p class="s_t_p1">请输入您的邮箱</p>

                                <div class="s_t_inpt">
                                    <input type="text">
                                    <div class="s_t_p2">订阅</div>
                                </div>
                                <div class="s_t_agt">
                                    <div class="checkbox"></div>
                                    <p>我同意依照本<span>使用条款</span>和<span>隐私政策</span>对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该
                                        <span>使用条款</span> 和
                                        <span>隐私政策</span> 的内容。</p>
                                </div>
                            </div>
                            <div class="s_right s_right_new">
                                <div class="title">官网专享</div>
                                <div><a href="#">加入YSL官网的过程很简单, 您只需点击“立即注册”, 即可进入注册过程, 尊享会员专属权益。</a></div>
                                <div class="s_left_ul">
                                    <div><span></span><a href="#">查看历史订单</a></div>
                                    <div><span></span><a href="#">官网独家礼赠</a></div>
                                    <div><span></span><a href="#">收藏您喜欢的产品</a></div>
                                    <div><span></span><a href="#">一手新品资讯</a></div>
                                </div>
                                <div class="btn_box">
                                    <a href="#">立即注册</a>
                                </div>
                            </div>
                        </div>


                    </li>
                    <li class="h_t_shopbags"> <strong></strong> <a href="" class="a_h">购物袋<span>-0</span>件商品</a>
                        <div class="h_t_h"></div>
                        <!-- 购物袋 -->
                        <div id="service" class="service3">
                            <div class="xj xj3"></div>
                            <div class="s_content">您的圣罗兰购物袋是空的. <br><span>马上添加您最喜欢圣罗兰的产品</span></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <a href="#"><img src="./images/logo.png" alt="YSL圣罗兰美妆官方网站暨网上商城" title="YSL圣罗兰美妆官方网站暨网上商城"></a>
    </div>
    <!-- nav导航部分 -->
    <div id="nav">
        <div class="nav_left">
            <ul>
                <li class="makeup"><a href="#">彩妆</a>
                    <div class="m_xsj"></div>
                    <!-- 二级菜单 -->
                    <ul class="menu_2">
                        <li><a href="#" class="menu_2_li">唇部</a>
                            <ul>
                                <li><a href="#">唇膏</a></li>
                                <li><a href="#">唇部</a></li>
                                <li><a href="#">唇油</a></li>
                                <li><a href="#">唇夹霜</a></li>
                                <li><a href="#">唇釉</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="menu_2_li">面部</a>
                            <ul>
                                <li><a href="#">明彩笔</a></li>
                                <li><a href="#">妆前隔离</a></li>
                                <li><a href="#">粉饼</a></li>
                                <li><a href="#">蜜粉</a></li>
                                <li><a href="#">腮红</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="menu_2_li">眼部</a>
                            <ul>
                                <li><a href="#">唇膏</a></li>
                                <li><a href="#">唇部</a></li>
                                <li><a href="#">唇油</a></li>
                                <li><a href="#">唇夹霜</a></li>
                                <li><a href="#">唇釉</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="menu_2_li">甲油</a></li>
                        <li><a href="#" class="menu_2_li">套装及工具</a></li>

                        <div class="ul_button">
                            <div class="ul_button_a">
                                <div class="ul_button_left">
                                    <div class="ul_button_left_l">
                                        <span>热卖</span>
                                        <img src="./images/nav1.jpg" alt="圣罗兰莹亮纯魅唇膏" title="圣罗兰莹亮纯魅唇膏">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ul>
                </li>

                <li><a href="#">护肤</a></li>
                <li><a href="#">香水</a></li>
                <li><a href="#">明星产品</a></li>
                <li><a href="#">520限定礼盒</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">私人定制服务</a></li>
            </ul>
            <form action="">
                <input type="text" placeholder="YSL气垫">
                <a href="#"><strong></strong></a>
            </form>
        </div>
    </div>
    <!-- active部分 -->
    <div id="active1">
        <a href="#"><img src="./images/active11.jpg" alt=""></a>
    </div>
    <div id="active2">
        <a href="#"><img src="./images/active2.jpg" alt=""></a>
    </div>
    <div id="active3">
        <a href="#"><img src="./images/active13.jpg" alt=""></a>
    </div>
    <div id="active4">
        <a href="#"><img src="./images/active14.jpg" alt=""></a>
    </div>
    <div id="active5">
        <img src="images/active89.jpg.jpg" usemap="#Map">
        <map name="Map">
            <area shape="rect" coords="424,6,1494,282" href="./goodslist.html" hidefocus="true" onfocus="this.blur()">
        </map>
    </div>
    <div id="active6">
        <img src="images/active88.jpg.jpg" usemap="#Map">
        <map name="Map">
            <area shape="rect" coords="394,10,1536,344" href="./goodslist.html" hidefocus="true" onfocus="this.blur()">
        </map>
    </div>
    <div id="active7">
        <img src="images/active90.jpg.jpg" usemap="#Map">

        <map name="Map">
            <area shape="rect" coords="426,2,954,238" href="./goodslist.html">
            <area shape="rect" coords="962,-6,1500,248" href="./goodslist.html">
        </map
    </div>
    <div id="active8">
        <a href="#"><img src="./images/active18.jpg" alt=""></a>
    </div>
    <div id="active9">
        <a href="#"><img src="./images/active19.jpg" alt=""></a>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script src="./scripts/active.js"></script>
<script src="./scripts/common.js"></script>

</html>